<template>
  <AppLayout>
    <div class="container">
      <div class="centered-div" v-for="(item, index) in paginatedData" :key="index" @click="goToDetails(item)" >

      </div>
    </div>
    <div class="pagination">
      <button @click="currentPage--" :disabled="currentPage <= 1">上一页</button>
      <span>Page {{ currentPage }}</span>
      <button @click="currentPage++" :disabled="currentPage >= totalPages">下一页</button>
    </div>
  </AppLayout>
</template>

<script>
import AppLayout from './Layout1.vue';

export default {
  name: 'HomePage',
  components: {
    AppLayout,
  },
  data() {
    return {
      items: new Array(11).fill(0).map((_, i) => ({ content: `Item ${i + 1}` })),
      currentPage: 1,
      itemsPerPage: 6,
      // 存放图片信息的列表
      // images: [
      //   { id: 0, idView: require('./static/images/choose-us-img1.jpg' )},
      //   { id: 1, idView: require('./static/images/choose-us-img3.jpg') },
      //   // 可以根据需求继续添加更多图片信息
      // ],
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.items.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.items.length / this.itemsPerPage);
    }
  },
};
</script>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start; /* 确保从行的开始位置排列并且不会在元素之间产生多余的空间 */
  align-items: center;
  padding: 10px;
}

.centered-div {
  flex: 0 0 calc(33.333% - 20px); /* flex-basis 调整为减去 margin 后的三分之一宽度 */
  height: 200px; /* 自由调整高度 */
  margin: 10px; /* 保持固定的边距 */

  /* 其他样式维持不变 */
  display: flex;
  justify-content: center;
  align-items: center;

  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  box-sizing: border-box;
}
.centered-div img{
  max-width: 100%;  /* 确保图片最大宽度不超过父级 div 的宽度 */
  height: auto;     /* 设置自动高度以保持图片比例 */
  display: block;   /* 避免图片下方出现额外空间 */
}
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  margin: 0 10px;
}
</style>
